<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title></title>
    <!--jQuery js-->
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <!--MiniUI-->
    <link href="/static/js/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <script src="/static/js/miniui/miniui.js" type="text/javascript"></script>
    <script src="/static/js/boot.js" type="text/javascript"></script>
</head>
<body>
<div class="mini-toolbar">
    <a class="mini-button" iconCls="icon-add" onclick="addRow()">增加</a>
    <a class="mini-button" iconCls="icon-edit" onclick="editRow()">修改</a>
    <a class="mini-button" iconCls="icon-remove" onclick="removeRow()">删除</a>
    <a class="mini-button" iconCls="icon-save" onclick="saveData()" plain="true">保存</a>
    <span class="separator"></span>
    <input id="idFilter" property="filter" class="mini-textbox" style="width: 150px;;"
           onvaluechanged="onFilterChanged" emptyText="过滤名字关键字" />
</div>
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;"
     url="http://localhost:8080/student/all1"
     allowResize="true" pageSize="20"
     allowCellEdit="true" allowCellSelect="true" multiSelect="true"
     editNextOnEnterKey="true"  editNextRowCell="true">
    <div property="columns">
        <div field="id" width="120" headerAlign="center" allowSort="true">id</div>

        <div field="name" width="120" headerAlign="center" allowSort="true">学生姓名
            <input property="editor" class="mini-textbox" style="width:100%;" minWidth="200" />
        </div>
        <div field="address" width="120" headerAlign="center" allowSort="true">地址
            <input property="editor" class="mini-textbox" style="width:100%;" minWidth="200" />
        </div>
        <div field="age" width="100" allowSort="true" >年龄</div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    mini.parse();
    var grid = mini.get("datagrid1");
    grid.load();
    //删除选中行
    function removeRow(){
        var rows=grid.getSelecteds();

        if(rows.length>0){
            mini.confirm("确定删除记录？","警告",function(action){//confirm返回Boolean,mini.confirm()返回警告框，必须加回调函数
                if(action=="ok"){
                    romve(rows);
                }
            })
        }else{
            mini.alert("请选中一条记录");
        }
    };

    function romve(rows){
        var id = rows[0].id;
        $.ajax({
            type: "Delete",
            url: "http://localhost:8080/student/del/"+id,
            dataType: "json",
            success: function(data){
                if (data.code == 200){
                    grid.removeRows(rows);
                } else{
                    mini.alert("删除失败");
                }
            }
        });
    }

    //弹出子页面添加一条数据
    function addRow(){
        mini.open({
            targetWindow: window,url:"/stu/edit",title:"新增记录",width:600,height:200,showMaxButton: true,
            onload: function () {
                var iframe = this.getIFrameEl();
            },
            ondestroy: function (action) {
                if(action=="ok"){
                    var iframe = this.getIFrameEl();
                    var data = iframe.contentWindow.GetData();
                    var stu = {
                        "name":data.name,
                        "address":data.address,
                        "age":data.age
                    }
                    $.ajax({
                        type: "POST",
                        url: "http://localhost:8080/student/insert",
                        data: stu,
                        dataType: "json",
                        success: function(data){
                            if (data.code == 200){
                                grid.load();
                            } else{
                                mini.alert("新增失败");
                            }
                        }
                    });
                }
            }
        })
    };

    //编辑选中行，id不能修改
    function editRow(){
        var row=grid.getSelected();
        if(row){
            mini.open({
                targetWindow:window,url:"/stu/edit",title:"修改信息",width:600,height:200,showMaxButton:true,
                onload:function(){
                    var iframe = this.getIFrameEl();
                    var data = {action: "edit",edit_item:row};
                    console.log(data);
                    iframe.contentWindow.SetData(data);
                },
                ondestroy:function(action){
                    if(action=="ok"){
                        var iframe=this.getIFrameEl();
                        var data=iframe.contentWindow.GetData();
                        console.log(data);
                        var stu = {
                            "id":data.id,
                            "name":data.name,
                            "address":data.address,
                            "age":data.age
                        }
                        console.log(stu);
                        $.ajax({
                            type: "POST",
                            url: "http://localhost:8080/student/update",
                            data: stu,
                            dataType: "json",
                            success: function(data){
                                if (data.code == 200){
                                    grid.load();
                                } else{
                                    mini.alert("修改失败");
                                }
                            }
                        });
                    }
                }
            })
        }else{
            mini.alert("请选中一条记录");
        }
    };

    //模糊查询输入框里的记录
    function onFilterChanged(e) {
        var idbox = mini.get("idFilter");

        var id = idbox.getValue().toLowerCase();


        grid.filter(function (row) {
            var r1 = true;
            if (id) {
                //有关键字即可查询，精准查询为String(row.name).toLowerCase().indexOf(name) != -1
                r1 = String(row.id).toLowerCase().indexOf(id) != -1;

                return r1;
            }
            return r1;
        });
    }

</script>